<template>
    <div class="label-tree">
        <slot></slot>
        <div class="label-style">{{labelName}}</div>
        <div class="tree-style">
            <a-tree-select v-model:value="checkedKeys" :style="'width:' + treeWidth +'px'" tree-checkable
                tree-default-expand-all :show-checked-strategy="SHOW_PARENT" :height="treeHeight" :tree-data="treeData"
                :max-tag-count="10" :placeholder="placeholder" @change="handleChange">
            </a-tree-select>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'LabelTreeSelect'
}
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import { TreeSelect } from 'ant-design-vue';
interface Props {
    labelName?: string,
    checkedKeys: string[],
    treeData: any[],
    treeHeight?: number
    treeWidth?: number,
    placeholder?: string
}

const props = withDefaults(defineProps<Props>(), {
    labelName: '',
    treeHeight: 233,
    treeWidth: 240
})

const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const emits = defineEmits(['inputChangeFunc'])
// 需要传递的值
const handleChange = (e: any) => {
    console.log('选择数======', props.checkedKeys)
    emits('inputChangeFunc', props.checkedKeys);
}
</script>
<style lang="less" scoped>
.label-tree {
    display: flex;
    align-items: center;

    .tree-style {
        margin-left: 10px;
    }

}
</style>